<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06_插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作 
		增：
		append()           功能：在匹配元素元素集合中所有元素的内部末尾插入内容
		prepend()          功能：在匹配元素元素集合中所有元素的内部开头插入内容
		
		after()            功能：在匹配元素元素集合中所有元素的外部后面插入内容
		before()           功能：在匹配元素元素集合中所有元素的外部前面插入内容
		
		remove()           功能：移除匹配元素集合中所有的元素以及子元素【盒子模型都删掉】
		empty()            功能：清空匹配元素集合中所有的元素的内容【盒子模型不删掉】
		
		replaceWith()
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			button#btn1{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;  /*  鼠标移入，鼠标形状改变  */
			}
			/* 留白 */
			body{
				margin: 20px;
			}
			div#target{
				padding: 10px;
				margin-top: 10px;
				border: 1px solid #55ffff;
				border-radius: 5px;
			}
			.boss{
				display:block;
				border-radius:50%;
				border:5px solid #ff00bf;
				background-image:url(../img/2.gif);
				background-size:100% 100%;
				box-shadow:5px 5px 10px #c3bdff;
				width:300px;
				height:300px;
			}
		</style>
	</head>
	<body>
		<!-- html: 7个按钮 div包含p->目标元素的初始段落  id="target"
		                  div包含p->插入新元素的初始段落 id="newElement"   隐藏
			 css: 按钮  外边距5px  内边距10px  15px  鼠标移入图标发生改变为手指
			     body  外边距20px
				 #target  像素边框  内边距  10px  上外边距10px
						  -->
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="prependBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<div id="target">
			<p>目标元素的初始段落</p>
			</div>
		<div id="newElement" style="display: none;">
			<p>插入新元素的初始段落</p>
			</div>
		<script>
			/*  1.点击 内部末尾插入元素  按钮  实现在p文本后面追加新元素中包含内容操作  */
			$("#appendBtn").click(function(){
				//效果： 点击按钮  追加"新元素--自带对应内容"
				//1.1 追加内容为新元素---克隆--html结构全部，复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone()  创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				//1.2 自带属性和属性值：隐藏--改成显示
				cpe.css("display","block");
				//1.3 将复制出来的新元素，追加给当前元素上
				$("#target").append(cpe);
			});
			
			/*  2. 点击 内部开头插入元素 按钮  实现p文本追加新元素中包含操作  */
			$("#prependBtn").click(function(){
				var ppb=$("#newElement").clone();
				ppb.css("display","block");
				$("#target").prepend(ppb);
			});
			
			/*  3. 点击 内部开头插入元素 按钮  实现p文本追加新元素中包含操作  */
			/*$("#afterBtn").click(function(){
				var afb=$("#newElement").clone();
				afb.css("display","block");
				$("#target").after(afb);
			});*/
			$("#afterBtn").click(function(){
				var afb=$("#newElement").clone();
				afb.css("display","block");
				$("#newElement").addClass("boss");
				$("#target").after(afb);
			});
			
			/*  4. 点击  外部前面插入元素  按钮  生成圆形，保留背景色，文本不需要，背景图300*300  */
			$("#beforeBtn").click(function(){
				$("#newElement p").css("display","none");
				var bfb=$("#newElement").clone();
				bfb.css({
					"display":"block",
					"border-radius":"50%",
					"border":"5px solid #ff00bf",
					"background-image":"url(../img/2.gif)",
					"background-size":"100% 100%",
					"box-shadow":"5px 5px 10px #c3bdff",
					"width":"300px",
					"height":"300px",
					//"color":"transparent",
				});
				$("#target").before(bfb);
			});
			
			/* 5.点击 删除元素  按钮  页面上所有元素包括子元素全部删除【盒子模型】  */
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			/*  6.  点击  清空元素  按钮  页面上所有元素中内容全部删除【盒子模型不删】  */
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			/*  7.点击  替换元素  按钮  页面上目标元素替换为新元素  */
			$("#replaceBtn").click(function(){
				// 克隆一个新元素#newElement【父子级】
				var c=$("#newElement").clone().css("display","block");
				// 替换  新元素  替换  目标元素
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>